<template>
  <div class="Outing">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="姓名">
                <a-input v-model.trim="queryParam.name" placeholder="" />
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="学号">
                <a-input v-model.trim="queryParam.directorId" placeholder="" />
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="searchQuery">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAddT" type="primary" icon="plus" v-has="'Honor:add'">新增</a-button>

        <a-button style="margin-left: 8px" type="primary" @click="handleApply()">申请外出列表</a-button>

        <a-popconfirm title="是否删除所选项" ok-text="确定" cancel-text="取消" @confirm="confirm" @cancel="cancel">
          <a-dropdown v-has="'Volunteer:batchdelete'">
            <a-button style="margin-left: 8px"><a href="#">批量删除</a> </a-button>
          </a-dropdown>
        </a-popconfirm>
      </div>
    </a-card>

    <Outingtable ref="loadong" @showdel="showdel" />
    <OutingFrom :visible="visible" @handlevisible="handlevisible" v-if="blackShow" @resetSearchForm="resetSearchForm" />
    <OutingFromThree
      :visibles="visibles"
      @handlevisibles="handlevisibles"
      v-if="noneShow"
      @resetSearchForm="resetSearchForm"
    />
  </div>
</template>

<script>
import OutingFrom from './modules/OutingFrom'
import OutingFromThree from './modules/OutingFromThree'
import Outingtable from './modules/Outingtable.vue'

export default {
  name: 'Outing',
  components: { OutingFrom, Outingtable, OutingFromThree },
  data() {
    return {
      visible: false,
      visibles: false,
      blackShow: false,
      noneShow: false,
      advanced: false, // 高级搜索 展开/关闭
      queryParam: {
        title: '',
        status: 0,
        name: '',
        directorId: '', //学生id
      },
      selectedRowKeys: [],
      num: 0,
    }
  },
  methods: {
    showdel(val) {
      this.selectedRowKeys = val || []
      // console.log(val)
    },
    confirm(e) {
      // console.log(e)
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning('请先选择删除项')
      } else {
        this.$refs.loadong.Inbatches()
        this.$message.success('删除成功')
      }
    },
    cancel(e) {
      console.log(e)
      this.$message.error('取消成功')
    },
    // 新增事件
    handleAddT() {
      this.visible = true
      this.blackShow = true
    },
    handlevisible(bool) {
      this.visible = bool
    },
    handlevisibles(bool) {
      this.visibles = bool
    },

    // 申请事件
    handleApply() {
      this.visibles = true
      this.noneShow = true
    },
    // 查询事件
    searchQuery() {
      // console.log(this.queryParam.name)
      let director = this.queryParam.name
      let directorId = this.queryParam.directorId
      this.$refs.loadong.searchQuery(null, null, director, directorId)
    },
    // 重置事件
    resetSearchForm() {
      console.log('触发了重置事件')
      ;(this.queryParam.name = ''), (this.queryParam.directorId = '')
      this.$refs.loadong.searchQuery()
    },
  },
}
</script>
 
<style lang = "less" scoped>
.table-operator {
  margin-top: 10px;
}
</style>